<template>
  <div id="UserManager">
    <el-card class="box-card-main">
      <el-card class="box-card" shadow="nerve">
        <el-row>
          <el-col :span="4">
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="openAddAndUpdateUserWindow('insert')">添加轮播图</el-button>
          </el-col>
        </el-row>
      </el-card>
      <el-card class="box-card" shadow="nerve" style="margin-top: 20px;height: 600px;overflow-y: scroll;">
        <el-table :data="userData" border :header-cell-style="this.rowStyle" :cell-style="this.rowStyle">
          <el-table-column fixed prop="id" label="id" width="150"></el-table-column>
          <el-table-column prop="imageId" label="轮播图片" width="200">
                   <template slot-scope="scope">
                     <el-image style="width: 100px; height: 100px"
                       :src="'http://101.43.223.224:8765/image/getImageById?id='+scope.row.imageId"></el-image>
                   </template>
                   </el-table-column>
                   <el-table-column prop="pcOrApp" label="端口显示" width="150">
                     <template slot-scope="scope">
                       <p>{{scope.row.pcOrApp===0?"pc显示":scope.row.pcOrApp===1?"app显示":"888"}}</p>
                     </template>
                   </el-table-column>
                   <el-table-column prop="diycommType"    label="分类" width="150">
                     <template slot-scope="scope">
                       <p>{{scope.row.diycommType===1?"diy":scope.row.diycommType===2?"商品" :scope.row.diycommType===3?"主页":"888"}}</p>
                     </template>
                   </el-table-column>
          <el-table-column prop="carouselB" label="类型" width="200"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
          <el-table-column fixed="right" label="操作" width="340" align="center">
            <template slot-scope="scope">

              <el-button @click="openAddAndUpdateUserWindow('update',scope.row)" type="success" size="medium">编辑</el-button>
              <el-button @click="deletSlidesrById(scope.row.id)" type="danger" size="medium">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[1, 5, 10, 15]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        :background="true"
        style="margin: 30px 0 10px">
      </el-pagination>
      <el-dialog :title="windowTypeInfo" :visible.sync="controlAddAndUpdateUserWindow" width="30%" center>
        <el-form :model="slidesForm" ref="userFormRef" label-width="80px" class="demo-ruleForm">
          <el-form-item label="轮播图片" style="margin-bottom: 0;">
              <el-upload
                class="avatar-uploader"
                action="action"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="轮播图">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          <el-form-item label="id" prop="id" v-show="false">
            <el-input v-model="slidesForm.id"></el-input>
          </el-form-item>
          <el-form-item label="端口显示" prop="pcOrApp"  >
              <el-select v-model="slidesForm.pcOrApp"  placeholder="请选择" style="width: 100%;">
                <el-option label="pc显示" :value="0"></el-option>
                <el-option label="app显示" :value="1"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="类型分类" prop="diycommType"  >
              <el-select v-model="slidesForm.diycommType"  placeholder="请选择" style="width: 100%;">
                <el-option label="diy页面显示" :value="1"></el-option>
                <el-option label="商品页面显示" :value="2"></el-option>
                <el-option label="主页显示" :value="3"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="分类" prop="commdiyId">
              <el-select @change="selectchange" v-model="slidesForm.commdiyId" placeholder="请选择" style="width: 100%;">
                <el-option :label="item.carouselType" :value="item.id" v-for="item in carouselDate" :key="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品查询" prop="carouselId">
              <el-select :disabled="!slidesForm.commdiyId" v-model="slidesForm.carouselId" filterable placeholder="请选择">
              <el-option 
                v-for="item in commdiyDate"
                :key="item.diyName"
                :label="item.diyName"
                :value="item.id">
              </el-option>
               </el-select>
             </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="controlAddAndUpdateUserWindow = false">取 消</el-button>
          <el-button @click="resetForm('userFormRef')">重 置</el-button>
          <el-button type="primary" @click="slidesInfo('userFormRef')">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
export default {
name: 'UserManager',
data () {
  return {
    imageFile:'',
    controlAddAndUpdateUserWindow: false, // 控制添加或修改窗口是否打开
    windowTypeInfo: '', // 窗口类型信息
    imageUrl: '', // 图片回显路径
    id:'',
    imageId: '',
    carouselDate:[],
    commdiy1Date:[],
    userData: [], // 用户数据
    commdiyDate:[],
    restaurants: [],
    state: '',
    timeout:  null,
    slidesForm: { // 表单
      id: 0, // 主键
      imageId: '', // 轮播图片
      commdiyId:'', //保存diy或商品
      carouselId:'', //保存商品id
      pcOrApp:'', //状态  0 pc 1 app
      diycommType:'',
      createTime:'', //创建时间
    },
    pageNum: 1, // 当前页数
    pageSize: 10, // 每页显示的个数
    total: 0, // 总条数
  }
},
mounted () {
  this.querysliderInfo()
  this.carouselist()
  this.loadAll()
},
methods: {
  selectchange(a){
    if(a==1 || a==3){
    this.$axios.get('handwork/ditylcomlist').then(result =>{
      if (result.data.flag) {
        this.commdiyDate = result.data.data
      }
    })
    }else if(a ==2 || a==4){
      this.$axios.get('Commodity/commodityllist').then(result =>{
      if (result.data.flag) {
        this.commdiyDate = result.data.data
      }
    })
    }

  },
  getdiycommType(a){
      var result  = a.match(/\(([^)]*)\)/)[1];
      this.slidesForm.pcOrApp = result;
      // 如果第一个选择框有值，那么第二个选择框可选，否则禁用
      if(a.length>0){
        this.showtype = false;
      }else{
        this.showtype = true;
      }
    },

  // 删除轮播图
  deletSlidesrById (data) {
    this.$confirm('此操作将删除该图片，是否继续？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {

      this.$axios.delete('show/slidshowDel', {
        params: {
          id: data
        }
      }).then((result) => {
        if (result.data.flag) {
    
          this.querysliderInfo()
          this.myMessage('success', result.data.data.content)
        } else {
    
        }
      }).catch((err) => {
        console.log(err)
      })
    }).catch(() => {
      this.$message({
        type: 'info',
        message: '已取消重置'
      })
    })
  },
  beforeAvatarUpload (file) {
    // 验证图片类型
    const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg'
    // 验证图片大小
    const isLt2M = file.size / 1024 / 1024 < 5
    // 提示
    if (!isJPG) {
      this.$message.error('上传头像图片只能是 ”图片“ 格式!')
    }
    if (!isLt2M) {
      this.$message.error('上传头像图片大小不能超过 5MB!')
    }
    // 赋值
    this.imageFile = file
    // 图片回显
    this.imageUrl = URL.createObjectURL(file)
    return false
  },
  // 查询全部用户信息

  querysliderInfo () {
    
    this.$axios.get('show/slidsShowList', {
      params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
    }).then((result) => {
      if (result.data.flag) {
        this.userData = result.data.data.content

        this.total = result.data.data.totalSize
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  loadAll() {
    this.$axios.get('handwork/commanddiylist', {
    }).then((result) => {
      if (result.data.flag) {
        this.commdiyDate = result.data.data
      }
    }).catch((err) => {
      console.log(err)
    })
      },
    carouselist() {
    this.$axios.get('carousel/carousellist', {
    }).then((result) => {
      if (result.data.flag) {
        this.carouselDate = result.data.data
      }
    }).catch((err) => {
      console.log(err)
    })
      },
  querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
+
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
  // 保存用户信息

  slidesInfo (formName) {
    const formData = new FormData()

    if (this.imageFile !== '') {
      formData.set('imageFile', this.imageFile, this.imageFile.name)
    }
    for (const albumInfoKey in this.slidesForm) {
      formData.set(albumInfoKey, this.slidesForm[albumInfoKey])
    }

    this.$axios.post('show/slideseAdd', formData).then((result) => {
      if (result.data.flag) {
        this.controlAddAndUpdateUserWindow = false
        this.querysliderInfo()
        this.resetForm(formName)
        this.imageFile = File
        this.imageUrl = ''
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  // 打开添加或修改角色信息窗口
  openAddAndUpdateUserWindow (windowType, row) {
    this.controlAddAndUpdateUserWindow = true
    if (windowType === 'insert') {
      this.windowTypeInfo = '添加轮播图信息'
      this.imageUrl = null
      this. slidesForm= { // 表单
      id: 0, // 主键
      imageId: '', // 轮播图片
      commdiyId:'', //保存diy或商品
      carouselId:'', //保存商品id
      pcOrApp:'', //状态  0 pc 1 app
      diycommType:'',
      createTime:'', //创建时间
    }
    } else {
      this.windowTypeInfo = '修改轮播图信息'
      this.imageUrl = 'http://101.43.223.224:8765/image/getImageById?id=' + row.imageId
      this.slidesForm = JSON.parse(JSON.stringify(row))
    }
  },
  // 每页显示的个数
  handleSizeChange (val) {
    this.querysliderInfo()
    this.pageSize = val
  },
  // 当前页数
  handleCurrentChange (val) {
    this.querysliderInfo()
    this.pageNum = val
  },
  // 文本域最大显示数
  descInput () {
    const txtVal = this.slidesForm.back.length
    if (txtVal >= 250) {
      this.remnant = 0
    } else {
      this.remnant = 250 - txtVal
    }
  }
}
}
</script>

<style scoped>
  .box-card-main {
    height:820px;
  }
  .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
::v-deep(.avatar-uploader .el-upload) {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
